@import "variables";
@import "input";

// 将start或end的border-radius设置为0
@mixin borderRadius0($direction: "start") {
  @if ($direction == "start") {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
  } @else {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }
}

@mixin addon() {
  position: relative;
  padding: 0 11px;
  color: rgba(0, 0, 0, 0.88);
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px solid $border-color;
  border-radius: $base-border-radius;
  transition: all 0.3s;
  line-height: 1;
  display: flex;
  align-items: center;

  &:first-child {
    border-inline-end: 0;
    @include borderRadius0("end");
  }

  &:last-child {
    border-inline-start: 0;
    @include borderRadius0("start");
  }
}

// 当有addons时的样式
.#{$input-prefix-cls}-group-wrapper {
  width: 100%;

  .#{$input-prefix-cls}-group {
    display: flex;

    .#{$input-prefix-cls}-affix-wrapper {
      &:not(:first-child) {
        @include borderRadius0("start");
      }

      &:not(:last-child) {
        @include borderRadius0("end");
      }
    }

    > .#{$input-prefix-cls} {
      &:not(:first-child) {
        @include borderRadius0("start");
      }

      &:not(:last-child) {
        @include borderRadius0("end");
      }
    }

    .#{$input-prefix-cls}-group-addon {
      @include addon();
    }
  }
}

// 当有prefix或者suffix时的样式
.#{$input-prefix-cls}-affix-wrapper {
  @include input();
  display: inline-flex;
  @include responsive();

  @include focus();
  @include hover();

  &-disabled {
    @include disabled();
  }

  &-borderless {
    @include borderless();
  }

  .#{$input-prefix-cls} {
    padding: 0;
    font-size: inherit;
    border: none;
    border-radius: 0;
    outline: none;
    line-height: 22px;
    min-height: 22px;

    &-disabled {
      color: $font-color;
      background-color: transparent;
    }

    &-sm {
      padding: 0;
      border-radius: 0;
    }

    &-lg {
      padding: 0;
      font-size: $large-font-size;
      border-radius: 0;
      line-height: 24px;
      min-height: 24px;
    }

    &:focus-within, &:hover {
      border: none;
      box-shadow: none;
    }
  }

  &:focus {
    z-index: 1;
  }

  .#{$input-prefix-cls}-prefix:not(:empty) {
    margin-inline-end: 4px;
  }

  .#{$input-prefix-cls}-suffix:not(:empty) {
    margin-inline-start: 4px;
  }

  .#{$input-prefix-cls}-suffix, .#{$input-prefix-cls}-prefix {
    display: flex;
    flex: none;
    align-items: center;
  }

  .#{$input-prefix-cls}-show-count-suffix {
    color: $gray;
    font-size: $base-font-size;
  }

  .#{$input-prefix-cls}-clear-icon {
    color: $gray;
    font-size: $small-font-size;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;

    &:hover {
      color: rgba(0, 0, 0, 0.45);;
    }

    &-hidden {
      visibility: hidden;
    }
  }
}
